<template>
  <div class="content_body">
    <div class="pageTitle">
      角色权限管理
      <span class="lookRouterTable" @click="lookRouterTable">查看当前角色路由表</span>
    </div>
    <div class="page_body">
       <div id="mountNode"></div>
    </div>
    <ChangeNode  @reGetData="reGetData" :node="currentNode"></ChangeNode>
  </div>
</template>
<script>
// import { } from "@/api/api";
import G6 from '@antv/g6';
import ChangeNode from './changeNode/changeNode.vue';
import {selectByRoleId,lookRouterTable} from "@/api/api"
export default {
  name: "permission",
  components:{
    ChangeNode
  },
  props:[
    'roleId',
    'roleName'
  ],
  data() {
    return {
       currentNode:{
         nodeId:"",
         nodeType:"",
         nodeName:"",
         children:[],
         parentId:"",
         parentName:""
       },
       nodeArray:[],
       treeData:[],
       graph:{}
    }
  },
  mounted: function() {
      this.getData()
  },
  methods: {
    async getData(){
        const params={
          roleId:this.roleId
        }
        const _self=this
        await selectByRoleId(params).then((data)=>{
            _self.nodeArray=data.data
            _self.treeData=_self.getTreeData(data.data)
            console.log(_self.treeData)
            _self.graphInit(_self.treeData)
        })
        },
    async reGetData(){
       const params={
          roleId:this.roleId
        }
        const _self=this
        await selectByRoleId(params).then((data)=>{
            _self.nodeArray=data.data
            _self.treeData=_self.getTreeData(data.data)
            _self.graph.updateChild(_self.treeData[0])
            _self.graph.fitView()
        })
    },
    graphInit(){
           const _self=this
            _self.graph=new G6.TreeGraph({
            container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
            width: 900, // Number，必须，图的宽度
            height: 500, // Number，必须，图的高度
            modes: {
            default: [
                {
                    onChange: function onChange(item, collapsed) {
                    const data = item.get('model').data;
                    data.collapsed = collapsed;
                    return true;
                    },
                },
                'drag-canvas',
                'zoom-canvas',
                ],
               },
            defaultNode: {
                size: 20,
                type:"circle",
            },
           defaultEdge: {
                style: {
                stroke: '#A3B1BF',
                },
            },
            layout: {
                type: 'compactBox',
                direction: 'LR',
                getId: function getId(d) {
                return d.id;
                },
                getHeight: function getHeight() {
                return 16;
                },
                getWidth: function getWidth() {
                return 16;
                },
                getVGap: function getVGap() {
                return 10;
                },
                getHGap: function getHGap() {
                return 100;
                },
            },
            })
            _self.graph.node(function(node) {
            return {
                label: node.nodeType+"-"+node.nodeName,
                id:node.nodeId,
                labelCfg: {
                offset: 10,
                position: node.children && node.children.length > 0 ? 'left' : 'right',
                },
            };
            });
            // 点击节点
            _self.graph.on('node:click', e => {
              // 先将所有当前是 click 状态的节点置为非 click 状态
              const clickNodes = _self.graph.findAllByState('node', 'click');
              clickNodes.forEach(cn => {
                _self.graph.setItemState(cn, 'click', false);
              });
              const nodeItem = e.item;  // 获取被点击的节点元素对象
              _self.graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
              _self.$store.commit("rolePermission/changeDialogPermissionVisible")
              _self.currentNode.nodeId=nodeItem.defaultCfg.model.nodeId
              _self.currentNode.nodeType=nodeItem.defaultCfg.model.nodeType
              _self.currentNode.nodeName=nodeItem.defaultCfg.model.nodeName
              _self.currentNode.children=nodeItem.defaultCfg.model.children?nodeItem.defaultCfg.model.children:[]
              _self.currentNode.parentId=nodeItem.defaultCfg.model.parentId
              _self.currentNode.parentName=nodeItem.defaultCfg.model.parentId==null?_self.currentNode.nodeName:_self.nodeArray.filter((item)=>{
                if(item.nodeId==nodeItem.defaultCfg.model.parentId){
                  return true;
                }else{
                  return false
                }
              })[0].nodeName
            });
            _self.graph.data(this.treeData[0]); // 读取 Step 2 中的数据源到图上
            _self.graph.render(); // 渲染图
            _self.graph.fitView();
        },
       getTreeData(tData){
         return tData.reduce(function sortTree(prev,current,index,array){
          let cArray=[...array]
          cArray.splice(index,1)
          if(current.nodeType=="根节点"){
              let returnData=cArray.length==0?[]:cArray.reduce(sortTree,[current.nodeId])
              returnData==undefined||returnData.length==0?"":(current.children=returnData)
              prev.push(current)
          }else if(current.nodeType=="目录"&&prev[0]==current.parentId){
              let returnData=cArray.length==0?[]:cArray.reduce(sortTree,[current.nodeId])
              returnData.length==0?"":(current.children=returnData)
              prev.push(current)
          }else if(current.nodeType=="组件"&&current.parentId==prev[0]){
              let returnData=cArray.length==0?[]:cArray.reduce(sortTree,[current.nodeId])
              returnData.length==0?"":(current.children=returnData)
              prev.push(current)
          }else if(current.nodeType=="权限属性节点"&&current.parentId==prev[0]){
              let returnData=cArray.length==0?[]:cArray.reduce(sortTree,[current.nodeId])
              returnData.length==0?"":(current.children=returnData)
              prev.push(current)
          }
          if(index>=array.length-1){
            prev.splice(0,1)
          }
          return prev
       },[''])
    },
    async lookRouterTable(){
          await lookRouterTable({roleId:this.roleId}).then((data)=>{
            console.log(data)
          })
    }
    }
};
</script>
<style lang="scss" scoped>
.content_body {
  position: relative;
  box-sizing: border-box;
  background: white;
  .pageTitle {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px 10px 20px;
    box-shadow: 0px 1px 0px 0px rgba($color: #000000, $alpha: 0.05);
    .lookRouterTable{
      float: right;
      cursor: pointer;
      font-size: 16px;
      color: rgba($color: #000000, $alpha: 0.7);
    }
    .lookRouterTable:active{
      transform: scale(0.9);
    }
  }
  .page_body {
    padding: 20px;
    .tool {
      margin-bottom: 20px;
    }
    .pagination {
      margin-top: 30px;
    }
  }
}
</style>
